<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>草稿箱</text>
			<text @tap="toApply" class="toApply" slot="right" v-if="list.length>0">{{manage?'完成':'编辑'}}</text>
		</pageHeader>
		<template v-if="list.length>0">
			<uni-swipe-action>
				<uni-swipe-action-item :options="options1" :disabled="manage" @click="bindClick($event,index)" v-for="(item,index) in list" :auto-close="false" :key='index' @change="change($event,index)" :show="item.isOpened">
					<view class="item" @tap='toEdit($event,index)'>
						<image src="/static/svg/deleDraft.svg" mode="" v-if="manage" @tap='bindClick($event,index,"need")' ></image>
						<draftBox :style='{marginLeft:manage?"68rpx":"0"}' :index='item.index' :message='item'/>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</template>
		<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore" v-if="list.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
		<view class="noResult" v-if="list.length<=0&&!showLoading">
			<image src="/static/img/nosou.png" mode=""></image>
			<text>暂无内容</text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import urls from "@/common/util/homeArtIndex.js"
	import pageHeader from "@/components/header/header.vue"
	import draftBox from "@/components/draftBox/draftBox.vue"
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {pageHeader,draftBox,uniSwipeAction,uniSwipeActionItem,uniLoadMore},
		data() {
			return {
				manage:false,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#C84739',
						color:'#FFFFFF',
					}
				}],
				list:[],
				isChange:false,
				showLoading:false,
				hasMore:true,
				pageNumber:1
			};
		},
		onShow() {
			this.list=[]
			this.pageNumber=1
			this.hasMore=true
			this.getList()
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getList()
			}
		},	
		methods: {
			async getList(){
				this.showLoading=true
				let res=await urls.myDraft({userId:localStorage.getItem("userId"),page:this.pageNumber,count:9})
				let list=res.data.list
				for(let a=0;a<list.length;a++){
					this.list.push(list[a])
				}
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				this.showLoading=false
				this.$forceUpdate()
			},	
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toApply(){
				for(let key in this.list){
					this.list[key].isOpened=false
				}
				this.$nextTick(()=>{
					this.manage=!this.manage
				})
			},
			change(e,index){
				this.isChange=true
				if(this.list.length>0){
					this.list[index].isOpened=e
				}
				if(e==true){
					this.$nextTick(()=>{
						for(let key in this.list){
							if(key!=index){
								this.list[key].isOpened=false
							}
						}
						this.$forceUpdate()
					})
				}else{
					setTimeout(()=>{
						this.isChange=false
					},2)
				}
			},
			async bindClick(e,index,n) {
				let data={},res
				if(n){
					uni.showModal({
						content: '确定要删除吗？',
						cancelText:'取消',
						confirmText:'确定',
						success:async (res)=> {
							if (res.confirm) {
								let state=this.list[index].state
								switch (state){
									case '1':
										//家装设计
										data.designId=this.list[index].id
										data.state=2
										res= await urls.deleteDesDraft(data)
										break;
									case '3':
										//艺术精品
										data.fineId=this.list[index].id
										data.state=2
										res= await urls.deleteArtDraft(data)
										break;	
									default:
										break;
								}
								if(res.code==0){
									this.list.splice(index,1)
								}
							}
						}
					})
				}else{
					let state=this.list[index].state
					switch (state){
						case '1':
							//家装设计
							data.designId=this.list[index].id
							data.state=2
							res= await urls.deleteDesDraft(data)
							break;
						case '3':
							//艺术精品
							data.fineId=this.list[index].id
							data.state=2
							res= await urls.deleteArtDraft(data)
							break;	
						default:
							break;
					}
					if(res.code==0){
						this.list.splice(index,1)
					}
				}
			},
			toEdit(e,index){
				if(this.manage){
					return
				}else if(this.isChange){
					this.isChange=false
					return
				}else{
					let state=this.list[index].state
					switch (state){
						case '1':
							//家装设计
							uni.navigateTo({
								url: '/pages/releaseDesign/releaseDesign?isEdit=true&&id='+this.list[index].id
							})
							break;
						case '3':
							//艺术精品
							uni.navigateTo({
								url: '/pages/ReleaseFineArt/release?isEdit=true&&id='+this.list[index].id
							})
							break;	
						default:
							break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.toApply{
	font-size: 32rpx;
	color:#A66354 ;
	line-height: 32rpx;
	letter-spacing: 1rpx;
	margin-right: 30rpx;
}
.item{
	border-bottom: 1rpx solid #DDDDDD;
	width: 750rpx;
	overflow-x: hidden;
	display: flex;
	align-items: center;
	position: relative;
	image{
		height: 42rpx;
		width: 42rpx;
		min-width: 42rpx;
		display: block;
		position: absolute;
		left: 30rpx;
	}
	/deep/ .draftBox{
		max-width:750rpx; 
		min-width: 750rpx;
		transition:all 0.2s;
	}
}
page /deep/ .uni-swipe_button-text{
	letter-spacing: 1rpx;
	font-size: 30rpx;
}
page /deep/ .uni-swipe_button{
	padding: 0;
	width:150rpx;
	position: relative;
	display: flex;
	align-items: center;
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 143rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
</style>
